<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端事件</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border:solid 1px #234;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        //获取元素
        const box = document.querySelector('#box');

        //绑定事件 on when 当...时候
        box.ontouchstart = function(){
            console.log('你触摸了我');
            this.startTime = Date.now();
        }

        box.addEventListener('touchmove', function(){
            console.log('滑动...');
        })

        box.addEventListener('touchend', function(){
            console.log('触摸离开');
        })

        box.addEventListener('touchcancel', function(){
            console.log('触摸被打断');
        });

        box.addEventListener('click', function(){
            console.log('你点击了我');
            this.endTime = Date.now();

            console.log('两次的时间差为:' + (this.endTime - this.startTime));
        })

        setTimeout(() => {
            alert('主人, 那家伙又来电话啦!!');
        },2000)
    </script>

</body>
</html>